<template>
	<view class="list-item flex" hover-class="is-hover" @click="handleClick">
		<template v-if="type === 1">
			<view class="image-box">
				<image class="cover-image" :src="data.image || '/static/images/no-images.png'" mode="aspectFill" />
				<text v-if="data.cate === 1" class="sign blue">网吧</text>
				<text v-if="data.cate === 2" class="sign violet">电竞酒店</text>
			</view>
			<view class="content-box flex-1 flex-column">
				<view class="item-name line-1">{{ data.name }}</view>
				<view class="desc-box flex">
					<image class="icon" src="/static/icons/address-icon.png" />
					<text class="desc flex-1 line-1">{{ data.address }}</text>
					<text v-if="showDistance" class="distance">{{ formatDistance(data.distance) }}</text>
				</view>
				<view class="tag-list flex">
					<view v-if="!data.flags.length" class="tag-item">未设置标签</view>
					<view v-for="(tag, index) in data.flags" :key="index" class="tag-item">{{ tag }}</view>
				</view>
			</view>
		</template>
		<template v-if="type === 2">
			<view class="image-box">
				<image class="cover-image" :src="data.image || '/static/images/no-images.png'" mode="aspectFill" />
			</view>
			<view class="content-box flex-1 flex-column">
				<view class="item-name line-1">{{ data.name }}</view>
				<view class="desc-box flex">
					<text class="desc flex-1 line-1">{{ data.desc }}</text>
				</view>
				<view class="price">￥{{ data.price }}</view>
				<button class="buy-button" hover-class="is-hover" type="primary" @click.stop="handleClick">抢购</button>
			</view>
		</template>
		<template v-if="type === 3">
			<view class="image-box">
				<image class="cover-image" :src="data.image || '/static/images/no-images.png'" mode="aspectFill" />
			</view>
			<view class="content-box flex-1 flex-column">
				<view class="item-name line-1">{{ data.name }}</view>
				<view class="desc-box flex">
					<text class="desc flex-1 line-1">{{ data.contentDup }}</text>
				</view>
				<view class="date-box">{{ data.created_at }}</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	const props = defineProps({
		// 列表项类型(1:网吧 2:商品 3:资讯)
		type: {
			type: Number,
			default: 1
		},
		// 数据源
		data: {
			type: Object,
			default: () => {
				return {}
			}
		},
		// 是否显示距离
		showDistance: {
			type: Boolean,
			default: true
		}
	})

	const emit = defineEmits(["click"])

	// 点击事件
	function handleClick() {
		if (props.type === 1) {
			if (props.data.cate === 1) {
				// 网吧
				uni.navigateTo({
					url: `/pages/bar/detail?id=${props.data.id}`
				})
			} else {
				// 酒店
				uni.navigateTo({
					url: `/pages/hotel/detail?id=${props.data.id}`
				})
			}
		} else if (props.type === 2) {
			uni.openEmbeddedMiniProgram({
				appId: props.data.appid,
				path: props.data.pages,
				fail: (error) => {
					if(error.errMsg.indexOf("invalid appid") !== -1) {
						uni.showToast({
							title: "无效的AppId",
							icon: "none"
						})
					}
				}
			})
		} else if (props.type === 3) {
			uni.navigateTo({
				url: `/pages/notice/detail?id=${props.data.id}`
			})
		}
	}
</script>

<style scoped lang="scss">
	.list-item {
		column-gap: 30rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;

		.image-box {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;

			.sign {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 18rpx;
				color: #FFFFFF;
				border-radius: 10rpx 0 10rpx 0;
				padding: 5rpx 8rpx;

				&.blue {
					background-color: var(--primary-color);
				}

				&.violet {
					background-color: #8066FF;
				}
			}
		}

		.content-box {
			row-gap: 20rpx;

			.item-name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.desc-box {
				column-gap: 10rpx;

				.icon {
					width: 22rpx;
					height: 24rpx;
				}

				.desc,
				.distance {
					font-size: 24rpx;
					color: var(--gray-font-color);
				}
			}

			.tag-list {
				column-gap: 10rpx;

				.tag-item {
					color: #A1A7B3;
					font-size: 20rpx;
					padding: 0 20rpx;
					border-radius: 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					background-color: #F2F4F7;
					flex-shrink: 0;
				}
			}

			.price {
				color: #FA6500;
				font-size: 30rpx;
				font-weight: bold;
			}

			.buy-button {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				width: 130rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
			}

			.date-box {
				font-size: 24rpx;
				color: var(--gray-font-color);
			}
		}
	}
</style>